<template>
  <div class="coupon">
    <header>
      <el-form :model="searchData" class="searchForm">
      	<el-form-item>
      	  <el-input class="seech1" clearable v-model.trim="searchData.ticketName" placeholder="优惠券名称" @change="getTableData"></el-input>
      	</el-form-item>

        <el-form-item>
          <el-select v-model="searchData.preferentialType" clearable placeholder="优惠券类型" @change="getTableData">
            <el-option label="折扣券" :value="2" />
            <el-option label="满减券" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchData.useType" clearable placeholder="使用规则" @change="getTableData">
            <el-option label="通用" :value="1" />
            <el-option label="购买月租使用" :value="3" />
            <el-option label="会员充值使用" :value="4" />
          </el-select>
        </el-form-item>

        <el-form-item style="width: 100px;">
            <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
        </el-form-item>
        <div class="btnBox">
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="addShow = true">新增优惠券</el-button>
          <el-button type="warning" icon="el-icon-s-ticket" @click="grantShow = true">优惠券发放</el-button>
        </div>
      </el-form>
    </header>

    <section>
      <el-table :data="tableData" height="100%" border v-loading="tableLoading">
        <el-table-column prop="ticketName" label="优惠券名称" align="center">
        </el-table-column>
        <el-table-column prop="preferentialType" label="类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.preferentialType | typeFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="useType" label="使用规则" align="center">
          <template slot-scope="scope">
            {{ scope.row.useType | useTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="preferentialInfo" label="优惠内容" align="center" width="240">
        </el-table-column>
        <el-table-column prop="received" label="已领取" align="center">
        </el-table-column>
        <el-table-column prop="used" label="已使用" align="center">
        </el-table-column>
        <el-table-column prop="status" label="上架/下架" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.status" style="margin: 0;" type="danger" size="mini" @click="deleteCoupon(scope.row,2)">删除</el-button>
            <el-button style="margin: 0;" type="warning" size="mini" @click="detailsShow = true; id = scope.row.id">详情</el-button>
            <el-button style="margin: 0;" type="primary" size="mini" @click="useRecordShow = true; id = scope.row.id">使用记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchData.size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog title="新增优惠券" :visible.sync="addShow" width="460px" :close-on-click-modal="false" :close-on-press-escape="false">
      <addCoupon v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData()" />
    </el-dialog>

    <el-dialog title="优惠券发放" :visible.sync="grantShow" width="740px" :close-on-click-modal="false" :close-on-press-escape="false">
      <grantCoupon v-if="grantShow" @closeDialog="grantShow = false" @refresh="getTableData()" />
    </el-dialog>

    <el-dialog title="优惠券详情" :visible.sync="detailsShow" width="740px" :close-on-click-modal="false" :close-on-press-escape="false">
      <detailsCoupon v-if="detailsShow" :id="id" @closeDialog="detailsShow = false" @refresh="getTableData()" />
    </el-dialog>

    <el-dialog title="优惠券使用记录" :visible.sync="useRecordShow" width="740px">
      <useRecord v-if="useRecordShow" :id="id" @closeDialog="useRecordShow = false" @refresh="getTableData()" />
    </el-dialog>


  </div>
</template>

<script>
  import addCoupon from './components/addCoupon.vue'
  import grantCoupon from './components/grantCoupon.vue'
  import detailsCoupon from './components/detailsCoupon.vue'
  import useRecord from './components/useRecord.vue'

  export default {
    name: 'coupon',
    components: { addCoupon , grantCoupon , detailsCoupon , useRecord},
    filters: {
      typeFilter(preferentialType) {
        if(preferentialType == 1) {
          return '满减'
        } else {
          return '折扣'
        }
      },
      useTypeFilter(useType) {
        switch(useType) {
          case 1: 
            return '通用';
          case 2: 
            return '时长';
          case 3: 
            return '月租';
          case 4:
            return '充值';
        }
      }
    },
    data() {
      return {
        addShow: false,
        detailsShow: false,
        useRecordShow: false,
        searchData: {
          current: 1,
          size: 10
        },
        total: null,
        grantShow: false,
        tableData: [],
        typeOptions: [
          {
            value: '选项1',
            label: '优惠券类型(不限)'
          }, {
            value: '选项2',
            label: '满减券'
          }, {
            value: '选项3',
            label: '折扣券'
          }
        ],
        ruleOptions: [
          {
            value: '选项1',
            label: '使用规则(不限)'
          }, {
            value: '选项2',
            label: '通用'
          }, {
            value: '选项3',
            label: '购买时长使用'
          }, {
            value: '选项4',
            label: '购买月租使用'
          }

        ],
        typeValue: '',
        ruleValue: '',
        tableLoading: true
      }
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData(){
        this.$axios({
          method: 'post',
          url: '/promotion/ticket/getTicketByManage',
          data: this.searchData
        }).then((res) => {
          res.data.records.forEach(item => {
            item.status = item.status == 1;
          })
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.tableLoading = false;
        })
      },
      
      switchStatus(e,code) {
        let status;
        if(code == 2) {
          status = 2;
        } else {
          status = e.status == true ? 1 : 0;
        }
        this.$axios({
          method: 'post',
          url: '/promotion/ticket/updateTicketStatus',
          data: this.$qs.stringify({status: status, ticketId: e.id})
        }).then((res) => {
          if(res.code == 200) {
            if(code != 2) {
              this.$message.success('修改状态成功！')
            }
            this.getTableData();
          }
        })
      },
      
      deleteCoupon(e,code) {
        this.$confirm('确定删除此优惠券？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定删除',
          cancelButtonText: '放弃删除'
        })
          .then(() => {
            this. switchStatus(e,code);
            this.$message({
              type: 'info',
              message: '删除成功'
            });
          })
      },
      
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchData.size = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchData.current = val;
        this.getTableData();
      }
      // deleteCoupon(row) {
      //   console.log(row)
      // }
    }
  }
</script>

<style scoped>
  .coupon {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  header {
    height: 50px;
    padding: 10px;
  }
  section {
    height: calc(100% - 100px);
    padding: 10px;
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .searchForm .el-form-item {
  	width: 160px;
  	display: inline-block;
  }
  .seech1 {
   width: 140px;
  }
  .btnBox {
    float: right;
    margin-right: 10px;
  }


</style>
